import React from "react";
import ReactDOM from 'react-dom';

class Lattice extends React.Component {
    render() {
        return (
            <div class = "box">
                <h3>{this.props.name}</h3>
            </div>
        );
    }
}

const LATTICE = [
    {name:'起点',value:2000,state:'goodEvent',owner:'manager',pos:18},
    {name:'中国',value:5000,state:0,owner:'',pos:19},
    {name:'越南',value:1000,state:0,owner:'',pos:20},
    {name:'韩国',value:1300,state:0,owner:'',pos:21},
    {name:'机会',value:1000,state:'surprise',owner:'manager',pos:22},
    {name:'日本',value:3000,state:0,owner:'',pos:23},
    {name:'俄罗斯',value:4000,state:0,owner:'',pos:24},
    {name:'白云机场',value:1000,state:'airport',owner:'manager',pos:25},
    {name:'交所得税',value:1000,state:'badEvent',owner:'manager',pos:26},
    {name:'命运',value:1000,state:'surprise',owner:'manager',pos:27},
    {name:'埃及',value:1600,state:0,owner:'',pos:28},
    {name:'监狱',value:0,state:'jail',owner:'manager',pos:29},
    {name:'澳大利亚',value:2400,state:0,owner:'',pos:17},
    {name:'新西兰',value:1800,state:0,owner:'',pos:15},
    {name:'南极洲',value:20000,state:0,owner:'',pos:13},
    {name:'赌场',value:1000,state:'casino',owner:'manager',pos:11},
    {name:'机会',value:1000,state:'surprise',owner:'manager',pos:10},
    {name:'捡到钱',value:1000,state:'goodEvent',owner:'manager',pos:9},
    {name:'巴西',value:2000,state:0,owner:'',pos:8},
    {name:'阿根廷',value:2200,state:0,owner:'',pos:7},
    {name:'墨西哥',value:2400,state:0,owner:'',pos:6},
    {name:'美国',value:4500,state:0,owner:'',pos:5},
    {name:'意大利',value:3000,state:0,owner:'',pos:4},
    {name:'伦敦机场',value:1000,state:'airport',owner:'manager',pos:3},
    {name:'英国',value:3600,state:0,owner:'',pos:2},
    {name:'命运',value:1000,state:'surprise',owner:'manager',pos:1},
    {name:'阿尔卑斯山',value:1000,state:'trip',owner:'manager',pos:0},
    {name:'德国',value:3400,state:0,owner:'',pos:12},
    {name:'法国',value:3200,state:0,owner:'',pos:14},
    {name:'西班牙',value:2800,state:0,owner:'',pos:16}
];

function Map() {
    let lst = [];
    let i, j;
    for (i = 0; i < 30; i++)
        for (j = 0; j < 30; j++)
            if (LATTICE[j].pos == i)
                lst.push(<Lattice name={LATTICE[j].name} />);
    return (
        <div>
            {lst}
        </div>
    );
}

export default Map;
